<!--固定资产管理页-->
<template>
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">固定资产管理</span>
    <el-button type="primary" @click="saveDialogTitle"
               style="float:right;margin-top:10px;">新建资产</el-button>
  </div>
  <!-- 新建资产弹窗 -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">

    <el-form label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="资产识别码">
            <el-input placeholder="请输入内容" v-model="saveAssetForm.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产类型">
            <el-input placeholder="请输入内容" v-model="saveAssetForm.type"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="品牌">
            <el-input placeholder="请输入内容" v-model="saveAssetForm.brand"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格">
            <el-input placeholder="请输入内容" v-model="saveAssetForm.specifications"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="购买时间">
            <el-date-picker
            type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            v-model="saveAssetForm.buyTime"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购买价格">
            <el-input placeholder="请输入内容" v-model="saveAssetForm.price"
                      :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                      :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="资产状态" >
            <el-select placeholder="请选择" v-model="saveAssetForm.status">
              <el-option label="空闲" value="1"></el-option>
              <el-option label="占用" value="2"></el-option>
              <el-option label="待修" value="3"></el-option>
              <el-option label="修理中" value="4"></el-option>
              <el-option label="报废" value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工编号">
            <el-input placeholder="请输入内容" v-model="saveAssetForm.userId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="所属地">
            <el-input placeholder="请输入内容" v-model="saveAssetForm.location"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门编号">
              <el-input placeholder="请输入内容" v-model="saveAssetForm.departmentId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="库存数量">
            <el-input placeholder="请输入内容" v-model="saveAssetForm.stockNum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input placeholder="请输入内容" v-model="saveAssetForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary"
                 @click="saveAsset">确定</el-button>
    </template>
  </el-dialog>
  <!--资产搜索卡片-->
  <el-card style="margin: 20px;height: 130px">
    <el-form :inline="true">
      <el-form-item label="资产识别码" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchAssetForm.code"></el-input>
      </el-form-item>
      <el-form-item label="资产类型" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchAssetForm.type"></el-input>
      </el-form-item>
      <el-form-item label="资产状态" style="width: 200px;">
        <el-select placeholder="请选择" v-model="searchAssetForm.status">
          <el-option label="空闲" value="1"></el-option>
          <el-option label="占用" value="2"></el-option>
          <el-option label="待修" value="3"></el-option>
          <el-option label="修理中" value="4"></el-option>
          <el-option label="报废" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工编号" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchAssetForm.userId"></el-input>
      </el-form-item>
      <el-form-item label="所属地" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchAssetForm.location"></el-input>
      </el-form-item>
      <el-form-item label="所属部门编号" style="width: 220px;">
        <el-input placeholder="请输入内容" v-model="searchAssetForm.departmentId"></el-input>
      </el-form-item>
      <br>
      <el-form-item style="float: right">
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadAsset">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 固定资产列表 -->
  <el-card style="margin:20px;">
    <el-table :data="assetList">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="code" label="资产识别码"  align="center"/>
      <el-table-column prop="type" label="资产类型"  align="center"/>
      <el-table-column prop="brand" label="品牌"  align="center"/>
      <el-table-column prop="specifications" label="规格"  align="center"/>
      <el-table-column prop="stockNum" label="库存数" align="center"/>
      <el-table-column prop="buyTime" label="购买时间" align="center"/>
      <el-table-column prop="price" label="购买价格" align="center"/>
      <el-table-column prop="status" label="资产状态"  align="center"
                       :formatter="assetFormatter"/>
      <el-table-column prop="userId" label="使用者编号" align="center"/>
      <el-table-column prop="departmentId" label="部门编号" align="center"/>
      <el-table-column prop="location" label="所属地" align="center"/>
      <el-table-column prop="remark" label="备注" align="center"/>
      <el-table-column label="操作" align="center" >
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editAsset(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteAsset(scope.row.id,scope.row.code)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:30px;float: right;">
      <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20]"
          v-model:current-page="currentPage"
          v-model:page-size="currentSize"
          v-model:total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
// import axios from "axios";
import axios from "@/http";
import {ElMessage} from "element-plus";
import index from "vuex";


const assetList = ref([]);
const searchAssetForm = ref({});
const dialogTitle = ref('新建资产');
const dialogVisible = ref(false);
const saveAssetForm = ref({});
const currentPage = ref(1);
const currentSize = ref(5);
const total = ref(100);

const userInfo = getUser();
const username = userInfo?userInfo.username:'用户';
var id = userInfo.id;
var departmentId = userInfo.departmentId;

//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  loadAsset();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  loadAsset();
}

const saveDialogTitle = () => {
  dialogVisible.value = true;
  dialogTitle.value = '新建资产';
}

const loadAsset = ()=> {
  searchAssetForm.value.pageSize = currentSize.value;
  searchAssetForm.value.pageNum = currentPage.value;
  let data = qs.stringify(searchAssetForm.value);
  axios.get(BASE_URL+'/oa/asset/select?'+data).then((response)=>{
    if(response.data.code == 20000){
      assetList.value = response.data.data.list;
      total.value = response.data.data.total;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const assetFormatter = (row,column,cellValue,index)=>{
  if(cellValue == 1){
    cellValue = '空闲';
  }if(cellValue == 2){
    cellValue = '占用';
  }if(cellValue == 3){
    cellValue = '待修';
  }if(cellValue == 4){
    cellValue = '维修中';
  }if(cellValue == 5){
    cellValue = '报废';
  }
  return cellValue;
}

onMounted(()=>{
  loadAsset();
})

const resetSearch = () => {
  searchAssetForm.value = {};
  loadAsset();
}

const handleClose = () => {
  if(confirm('确定要关闭本弹窗吗?')){
    dialogVisible.value = false;
    saveAssetForm.value = {};
    loadAsset();
  }
}

const saveAsset = () => {
  let data = qs.stringify(saveAssetForm.value);
  axios.post(BASE_URL+"/oa/asset/save",data).then((response=>{
    if(response.data.code == 20000){
      dialogVisible.value = false;
      saveAssetForm.value = {};
      loadAsset();
      asset();
      ElMessage.success("保存成功");
    }else {
      ElMessage.error(response.data.msg);
    }
  }))
}

const editAsset = (id) => {
  dialogVisible.value = true;
  dialogTitle.value = '编辑资产';
  axios.get(BASE_URL+'/oa/asset/select?id='+id).then((response)=>{
    if(response.data.code == 20000){
      saveAssetForm.value = response.data.data[0];
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const asset = () => {
  axios.get(BASE_URL+'/oa/asset/addNum').then((response)=>{
  })
}

const deleteAsset = (id,code) => {
  if(confirm('确定要删除此资产吗?')){
    axios.post(BASE_URL+"/oa/asset/delete/"+id+"/"+code).then((response)=>{
      if(response.data.code == 20000){
        loadAsset();
        ElMessage.success("删除成功");
      }else {
        ElMessage.error(response.data.msg)
      }
    })
  }
}
</script>

<style scoped>

</style>